<template>
  <van-pull-refresh v-model="refreshing" style="min-height: 300px" @refresh="getList(1)">
    <template v-if="listData.length">
      <van-list
        v-model="loading"
        :finished="finished"
        :immediate-check="false"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        finished-text="没有更多了~"
        @load="getList"
      >
        <gb-card
          border
          shadow
          :remind="item.isTimeOut === '2'"
          :color="eventStatusColor[item.status]"
          class="list-item"
          v-for="(item, key) in listData"
          :key="key"
          labelType="bubble"
          :labelText="item.statusName"
          :affix-icon="
            item.isSupervising === '1' ? require('@/assets/images/event/basic/icon_affix_supervise.png') : ''
          "
          @click="$router.push(`/partyBuilding/activity/detail?code=${item.code}`)"
        >
          <p class="gb-card-info">
            <span class="gb-card-info__label">活动主题</span>
            <span class="gb-card-info__value van-multi-ellipsis--l2">{{ item.name }}</span>
          </p>
          <p class="gb-card-info">
            <span class="gb-card-info__label">活动类型</span>
            <span class="gb-card-info__value red van-multi-ellipsis--l2">{{ item.typeName }}</span>
          </p>
          <p class="gb-card-info">
            <span class="gb-card-info__label">开始时间</span>
            <span class="gb-card-info__value van-multi-ellipsis--l2">{{ item.activityStartTime }}</span>
          </p>
          <p class="gb-card-info">
            <span class="gb-card-info__label">活动地点</span>
            <span class="gb-card-info__value van-multi-ellipsis--l2">{{ item.site }}</span>
          </p>
        </gb-card>
      </van-list>
    </template>
    <template v-else>
      <van-empty
        :image="require('@/assets/images/basic/pic_no_content.png')"
        description="暂无内容~"
        style="height: 200px"
      />
    </template>
  </van-pull-refresh>
</template>
<script>
import partyBuilding from '@/api/partyBuilding'
import List from '@/mixins/list'
export default {
  mixins: [List],
  props: {
    searchForm: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  watch: {
    'searchForm.status': {
      handler(val) {
        this.getList(1)
      }
    }
  },
  data() {
    return {
      api: partyBuilding.My,
      eventStatusColor: {
        // 未开始
        2: '#E28556',
        // 进行中
        3: '#E2AB56',
        // 已结束
        4: '#3CBDD0'
      },
      listData: []
    }
  },
  created() {
    this.getList()
  }
}
</script>
<style scoped lang="less">
@import '~@/assets/style/list.less';
.red {
  color: #e25656;
}
.gb-card-info__label {
  width: 112px;
}
.gb-card-info__value {
  width: calc(100% - 262px);
  flex: none;
}
</style>
